<template>
    <div class="inventoryCommodity">
        <van-nav-bar title="盘点库位商品" left-arrow @click-left="handleLeft">
        </van-nav-bar>
        <van-overlay :show="overlayShow">
            <van-loading color="#1989fa">加载中...</van-loading>
        </van-overlay>
        <div class="flexd">
            <div @click="selectOne()" class="addArehousing_item">
                <div class="imgs"><van-image :src="add"></van-image></div>
                <div class="title">选择商品</div>
            </div>
            <div @click="saomaClick" class="addArehousing_item addArehousing_code">
                <div class="imgs"><van-image :src="saoma"></van-image></div>
                <div class="title">扫货架码</div>
            </div>
        </div>
        <div class="scoll_div">
            <div v-for="(it, ind) in warehouseList" :key="ind" class="div_content">
                <div class="titles">
                    <span>货架：{{ shelvesCode[ind] }}</span>
                    未修正商品默认无盈亏
                </div>
                <div class="conent">
                    <div v-for="(item, index) in it" :key="index" class="conent_pre">
                        <div class="conent_pre_header">
                            <div class="conent_pre_img">
                                <van-image :src="item.productImage + '?x-oss-process=image/resize,w_300'"
                                    v-if="item.productImage" @click="enlargeImage(item.productImage)">
                                    <div class="liveStreamingMechanisms" v-if="item.mechanismList[1]?.cooperationMode">
                                        多机制
                                    </div>
                                </van-image>
                                <van-image :src="errImg" v-else>
                                    <div class="liveStreamingMechanisms" v-if="item.mechanismList[1]?.cooperationMode">
                                        多机制
                                    </div>
                                </van-image>
                            </div>
                            <div class="conent_pre_des">
                                <div class="contnt_title">
                                    <div class="contnt_styleName">
                                        {{ item.styleName }}
                                    </div>
                                    <div :class="'contnt_status' + item.shelvesStatus">
                                        {{ shelvesStatusNameByIdss(item.shelvesStatus) }}
                                    </div>
                                </div>
                                <div class="contnt_mechanism">
                                    {{ item.sellingPoints }}
                                </div>
                                <div class="contnt_bottom">
                                    <div class="price">￥ {{
                                        item.mechanismList[0]?.price || item.mechanismList[0]?.costPrice }}</div>
                                    <div class="commission" v-if="item.mechanismList[0]?.commission">佣 {{
                                        (item.mechanismList[0]?.commission || 0) + "%"
                                    }}</div>
                                    <div class="coreName">{{ item.coreName }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="product_detail_title--content">
                            <div class="product_detail_title-content-info">
                                <div class="product_detail_title-content-info-name">机制：</div>
                                <div class="product_detail_title-content-info-content">
                                    {{ item.mechanismList[0]?.liveStreamingMechanism }}
                                </div>
                            </div>
                        </div>
                        <div class="product_detail_title--content">
                            <div class="product_detail_title-content-info">
                                <div class="product_detail_title-content-info-name colors">{{
                                    item.stockInfo?.locationName }}
                                </div>
                                <div class="product_detail_title-content-info-content">
                                    库存：<span class="priColor">{{ item.stockInfo?.stockAvailable }}</span>/{{
                                        item.stockInfo?.stockTotal }}件
                                </div>
                            </div>
                        </div>
                        <div class="conent_pre_bottom"
                            :style="{ 'justify-content': item.countNum ? 'space-between' : 'flex-end' }">
                            <div class="left" v-if="item.countNum && item.countNum != 0"
                                :style="{ 'color': item.countResult == 2 ? '#19D11B' : '#FC2540' }">
                                <div class="left_div">
                                    <van-image :src="item.countResult == 2 ? ying : kui"></van-image>
                                    <span :style="{ 'color': item.countResult == 2 ? '#19D11B' : '#FC2540' }">{{
                                        item.countResult == 2 ? '盈' : '亏' }}</span>
                                </div>
                                {{ item.countNum }}件
                            </div>
                            <div class="right">
                                <van-button plain type="primary" size="small" color="#0094FF"
                                    @click="commodityCirculation(item)">流转数据</van-button>
                                <van-button type="primary" size="small" class="correct"
                                    @click="correct(item)">修正库存</van-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="scoll_div_button" v-if="warehouseList.length > 0 || showComplete" @click="inventoryCompleted">
                盘点完成</div>
        </div>

        <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '58%' }">
            <div class="pop_content">
                <div class="conent_pre_header">
                    <div class="conent_pre_img">
                        <van-image :src="showBottomData.productImage + '?x-oss-process=image/resize,w_300'"
                            v-if="showBottomData.productImage" @click="enlargeImage(showBottomData.productImage)">
                            <div class="liveStreamingMechanisms"
                                v-if="showBottomData.mechanismList[1]?.cooperationMode">多机制
                            </div>
                        </van-image>
                        <van-image :src="errImg" v-else>
                            <div class="liveStreamingMechanisms"
                                v-if="showBottomData.mechanismList[1]?.cooperationMode">多机制
                            </div>
                        </van-image>
                    </div>
                    <div class="conent_pre_des">
                        <div class="contnt_title">
                            <div class="contnt_styleName">
                                {{ showBottomData.styleName }}
                            </div>
                        </div>
                        <div class="contnt_mechanism">
                            {{ showBottomData.detail.stockInfo.locationName }}
                        </div>
                        <div class="contnt_bottom">
                            (当前库存{{ showBottomData.detail.stockInfo.stockAvailable }}件/总库存{{
                                showBottomData.detail.stockInfo.stockTotal }}件）
                        </div>
                    </div>
                </div>
                <div class="product_detail_title--content">
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">实际库存</div>
                        <div class="product_detail_title-content-info-content">
                            <van-stepper v-model="physicalInventory" min="0" max="999" integer
                                :before-change="onChange" />
                        </div>
                    </div>
                </div>
                <div class="product_detail_title--content" v-if="showBottomData.detail.countNum != 0">
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">上次盘点结果</div>
                        <div class="product_detail_title-content-info-content">
                            <div class="left"
                                :style="{ 'color': showBottomData.detail.countResult == 2 ? '#19D11B' : '#FC2540' }">
                                <div class="left_div">
                                    <van-image :src="showBottomData.detail.countResult == 2 ? ying : kui"></van-image>
                                    <span
                                        :style="{ 'color': showBottomData.detail.countResult == 2 ? '#19D11B' : '#FC2540' }">{{
                                            showBottomData.detail.countResult == 2 ? '盈' : '亏'
                                        }}</span>
                                </div>
                                {{ showBottomData.detail.countNum }}件
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product_detail_title--content">
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">盘点结果</div>
                        <div class="product_detail_title-content-info-content"
                            v-if="physicalInventory !== showBottomData.detail.stockInfo.stockAvailable">
                            <div class="left"
                                :style="{ 'color': physicalInventory > showBottomData.detail.stockInfo.stockAvailable ? '#19D11B' : '#FC2540' }">
                                <div class="left_div">
                                    <van-image
                                        :src="physicalInventory > showBottomData.detail.stockInfo.stockAvailable ? ying : kui"></van-image>
                                    <span
                                        :style="{ 'color': physicalInventory > showBottomData.detail.stockInfo.stockAvailable ? '#19D11B' : '#FC2540' }">{{
                                            physicalInventory > showBottomData.detail.stockInfo.stockAvailable ? '盈' : '亏'
                                        }}</span>
                                </div>
                                {{ Math.abs(physicalInventory - showBottomData.detail.stockInfo.stockAvailable) }}件
                            </div>
                        </div>
                        <div class="product_detail_title-content-info-content" v-else>
                            <div class="left">
                                0件
                            </div>
                        </div>
                    </div>
                </div>

                <div class="product_detail_title--content">
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">备注</div>
                    </div>
                </div>
                <div class="product_detail_title--content">
                    <div class="product_detail_title-content-info-name">
                        <van-field v-model="notes" rows="3" autosize label="" type="textarea" placeholder="请输入"
                            maxlength="50" show-word-limit @input="(e) => { forbidRule(e, 'emoji') }" />
                    </div>
                </div>
                <div class="buttons_div" @click="confirmInventory" v-throttle:click>
                    确认库存
                </div>
            </div>
        </van-popup>

        <van-dialog v-model:show="dialogShow" title="提示" :showConfirmButton="false">
            <div class="dialog_title">保存当前盘点结果并盘点其他货架</div>
            <div class="dialog_buttons">
                <div @click="cancel" class="cancel">取消</div>
                <div @click="warehousingClick" class="save" v-throttle:click>确认</div>
            </div>
        </van-dialog>

    </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { stockLocation, checkLocationExistStock, queryProductByLocation, generateCountCode, queryProductById, getCurrentStockDetail, doCount, doCountFinish, checkShelfStatus, queryCountDetailList } from '@/api/productHome/index'
import { getEnvValue } from "@/utils/index";
import { shelvesStatusNameByIdss } from '@/utils/statusNameById'
import { showConfirmDialog, showFailToast, showImagePreview, showSuccessToast } from 'vant';
const router = useRouter();
const route = useRoute();
const errImg = new URL("@/assets/home/error.png", import.meta.url).href;
const ying = new URL("@/assets/productHome/icon_ying.png", import.meta.url).href;
const kui = new URL("@/assets/productHome/icon_kui.png", import.meta.url).href;
const saoma = new URL("@/assets/productHome/icon_saoyisao1.png", import.meta.url).href;
const add = new URL("@/assets/productHome/icon_tianjia.png", import.meta.url).href;
const overlayShow = ref(false)
// 当前货架号
const shelvesCode = ref<any>([])
// 商品list
const warehouseList = ref<any>([])
// 修正库存显隐
const showBottom = ref(false)
// 修正库存数据
const showBottomData = ref<any>(false)
// 实际库存
const physicalInventory = ref()
// 备注
const notes = ref()
// 盘点结束确认框
const dialogShow = ref(false)
// 库存单id主键
const countId = ref()
// 控制盘点完成得显隐
const showComplete = ref(false)

// 输入事件、禁用规则
const forbidRule = (e: any, type: string) => {
    // 输入法表情默认不能输入
    if (type == 'emoji') {
        // emoji：输入时禁用输入法表情
        notes.value = e.target.value.replace(/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi, '')
    } else if (type == 'blank') {
        // blank：输入时禁用空格
        notes.value = e.target.value.replace(/\s|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi, '')
    }
}

// 步进器限制 阻止输入负数
const onChange = (value: string): any => {
    return new Promise((resolve) => {
        if (value !== '-') {
            resolve(true);
        }
    });
}
// /** 移除当前数据 */
// const removeClick = (ind: any) => {
//     //  删除其中数据
//     warehouseList.value.splice(ind, 1)
//     //  删除库位码
//     shelvesCode.value.splice(ind, 1)
// }

// 商品选择传输数据
const info = computed(() => {
    return route.query.info;
})
/** 入库单 */
const details = computed(() => {
    return route.query.details
})
/** 选择商品时候 */
watch(
    () => info.value,
    async (v: any) => {
        if (!details.value) {
            if (v) {
                warehouseList.value = JSON.parse(localStorage.getItem('stocktakingList') as any) || []
                shelvesCode.value = JSON.parse(localStorage.getItem('shelvesCodeList') as any) || []
                const productIds = JSON.parse(v).map(item => item.id)
                if (localStorage.getItem('countId') && localStorage.getItem('countId') !== 'undefined') {
                    countId.value = localStorage.getItem('countId')
                } else {
                    // 生成库位码
                    const res = await generateCountCode()
                    if (res.code == 1001) {
                        showFailToast({ message: res.msg });
                        setTimeout(() => {
                            router.push('/inventoryAllocation')
                            removeLocalStorage()
                        }, 500)
                        return
                    } else {
                        countId.value = res.data
                    }
                }
                await queryProductById({ productIds: productIds, countId: countId.value })
            } else {
                warehouseList.value = JSON.parse(localStorage.getItem('stocktakingList') as any) || []
            }
        }
    },
    { immediate: true }
)
/** 清空缓存 */
const removeLocalStorage = () => {
    localStorage.removeItem("stocktakingList");
    localStorage.removeItem("shelvesCodeList");
    localStorage.removeItem("stocktakingIdList");
    localStorage.removeItem("countId");
}
/** 回退 */
const handleLeft = () => {
    if (warehouseList.value.length) {
        showConfirmDialog({
            message:
                '退出后将不保留未完成操作',
        })
            .then(() => {
                removeLocalStorage()
                if (details.value) {
                    router.back()
                } else {
                    router.push('/inventoryAllocation')
                }
            })
            .catch(() => {
                // on cancel
            });
    } else {
        removeLocalStorage()
        if (details.value) {
            router.back()
        } else {
            router.push('/inventoryAllocation')
        }
    }
}
/** 选择商品 */
const selectOne = () => {
    const ids = warehouseList.value.flat().map(item => item.id)
    // 整体数据
    localStorage.setItem("stocktakingList", JSON.stringify(warehouseList.value));
    // 库位码数据
    localStorage.setItem("shelvesCodeList", JSON.stringify(shelvesCode.value));
    // 商品id集合
    localStorage.setItem("stocktakingIdList", JSON.stringify(ids));
    // 库位码
    localStorage.setItem("countId", countId.value);
    router.push({
        path: '/inventoryGoods',
    })
}
/** 扫描库位码 */
const saomaClick = async () => {
    (window as any).uni.webView.postMessage({
        data: {
            type: "scanCode",
            name: "inventoryCommodity"
        },
    })
    // const indexs = shelvesCode.value.indexOf('L1-1-1')
    // 已有的货架码不可再加
    // if (indexs != -1) {
    //     showFailToast('该库位码已存在盘点中')
    // } else {
    //     if (typeof 'L1-1-1' === 'string') {
    //         try {
    //             await stockLocation({ name: 'L1-1-1' })
    //             overlayShow.value = true
    //             shelvesCode.value.unshift('L1-1-1')
    //             const res = await queryProductByLocation({ locationName: 'L1-1-1', countId: countId.value })
    //             res.data.forEach(element => {
    //                 element.productImage = getEnvValue("VITE_APP_PIC_URL") + element.productImage.split(',')[0]
    //             });
    //             warehouseList.value.unshift(res.data)
    //             overlayShow.value = false
    //         } catch (error) {
    //             overlayShow.value = false
    //         }
    //     } else {
    //         showFailToast({ message: '货架码错误' });
    //     }
    // }
}
/** uniapp端回传扫码数据 */
(window as any).msgFromUniapp = async (arg) => {
    if (arg.name == 'inventoryCommodity') {
        if (typeof arg.productId === 'string') {
            try {
                // 判断库位码是否合法
                await stockLocation({ name: arg.productId })
                overlayShow.value = true
                // 第一次进入调取生成盘点单接口
                if (arg.indexs == 1) {
                    // 判断库位上是否有商品
                    const response = await checkLocationExistStock({ locationName: arg.productId })
                    // L8-1-1-1货架上数据过多 导致得接口出现当即问题
                    if (arg.productId == 'L8-1-1-1') {
                        showFailToast({ message: '当前货架暂时无法盘点' });
                    } else {
                        // 检查库位码上是否存在商品
                        if (response.data) {
                            // 生成库位码
                            const res = await generateCountCode()
                            if (res.code == 1001) {
                                showFailToast({ message: res.msg });
                                setTimeout(() => {
                                    router.push('/inventoryAllocation')
                                }, 500)
                                return
                            } else {
                                countId.value = res.data
                            }
                        } else {
                            showFailToast('该库位无任何商品！')
                            setTimeout(() => {
                                router.push('/inventoryAllocation')
                            }, 500)
                            return
                        }

                    }
                }
                // 库位码查询商品
                if (countId.value) {
                    const res = await queryProductByLocation({ locationName: arg.productId, countId: countId.value })
                    if (res.data.length > 0) {
                        if (shelvesCode.value.indexOf(arg.productId) != -1) {
                            const indexs = shelvesCode.value.indexOf(arg.productId)
                            // 创建一个 Set 来快速查找id
                            const idsInArray1 = new Set(warehouseList.value[indexs].map(item => item.id));
                            res.data.forEach(item => {
                                if (item.productImage) {
                                    item.productImage = getEnvValue("VITE_APP_PIC_URL") + item.productImage.split(',')[0]
                                }
                                if (!idsInArray1.has(item.id)) {
                                    warehouseList.value[indexs].push(item);
                                }
                            });
                        } else {
                            shelvesCode.value.unshift(arg.productId)
                            res.data.forEach(element => {
                                if (element.productImage) {
                                    element.productImage = getEnvValue("VITE_APP_PIC_URL") + element.productImage.split(',')[0]
                                }
                            });
                            warehouseList.value.unshift(res.data)
                        }
                    }
                    overlayShow.value = false
                } else {
                    // 判断库位码是否合法
                    await stockLocation({ name: arg.productId })
                    // 判断库位上是否有商品
                    const response = await checkLocationExistStock({ locationName: arg.productId })
                    if (arg.productId == 'L8-1-1-1') {
                        showFailToast({ message: '当前货架暂时无法盘点' });
                    } else {
                        if (response.data) {
                            // 生成库位码
                            const res = await generateCountCode()
                            if (res.code == 1001) {
                                showFailToast({ message: res.msg });
                                setTimeout(() => {
                                    router.push('/inventoryAllocation')
                                }, 500)
                                return
                            } else {
                                countId.value = res.data
                            }
                        } else {
                            showFailToast('该库位无任何商品！')
                            setTimeout(() => {
                                router.push('/inventoryAllocation')
                            }, 500)
                            return
                        }
                        const res = await queryProductByLocation({ locationName: arg.productId, countId: countId.value })
                        if (res.data.length > 0) {
                            shelvesCode.value.unshift(arg.productId)
                            res.data.forEach(element => {
                                if (element.productImage) {
                                    element.productImage = getEnvValue("VITE_APP_PIC_URL") + element.productImage.split(',')[0]
                                }
                            });
                            warehouseList.value.unshift(res.data)
                        }
                    }
                    overlayShow.value = false
                }
            } catch (error) {
                overlayShow.value = false
            }
        } else {
            showFailToast({ message: '货架码错误' });
        }
    }
}
/** 图片放大 */
const enlargeImage = (img: string) => {
    if (img) {
        showImagePreview({
            images: [img],
        });
    }
};
/** 修正库存 */
const correct = async (item: any) => {
    const res = await getCurrentStockDetail({ productId: item.id, countId: countId.value })
    showBottomData.value = { ...item, detail: res.data }
    // 备注
    notes.value = item.remark
    // 当前商实际库存
    physicalInventory.value = showBottomData.value.detail.stockInfo.stockAvailable
    showBottom.value = true
}
/** 确认库存 */
const confirmInventory = async () => {
    await doCount({
        countId: countId.value,
        productId: showBottomData.value.id,
        locationId: showBottomData.value.detail.locationId,
        stockTotal: showBottomData.value.detail.stockInfo.stockTotal,
        stockAvailable: showBottomData.value.detail.stockInfo.stockAvailable,
        // 盘点结果(1、平衡，2、盘盈，3、盘亏)
        countResult: computedResult(physicalInventory.value, showBottomData.value.detail.stockInfo.stockAvailable),
        countNum: Math.abs(physicalInventory.value - showBottomData.value.detail.stockInfo.stockAvailable),
        remark: notes.value
    })
    // 获取当前商品详情
    const res = await getCurrentStockDetail({ productId: showBottomData.value.id, countId: countId.value })
    // 更新商品列表中当前数据
    warehouseList.value.forEach((subArray, subIndex) => {
        const index = subArray.findIndex((item) => item.id === showBottomData.value.id);
        if (index !== -1) {
            warehouseList.value[subIndex][index].stockInfo.stockAvailable = res.data.stockInfo.stockAvailable
            warehouseList.value[subIndex][index].stockInfo.stockTotal = res.data.stockInfo.stockTotal
            warehouseList.value[subIndex][index].countResult = res.data.countResult
            warehouseList.value[subIndex][index].countNum = res.data.countNum
            return;
        }
    })
    notes.value = ''
    showSuccessToast('修正库存成功')
    setTimeout(() => {
        showBottom.value = false
    }, 500)
}
/**
 * 计算盘点结果
 * @param realityCount  实际库存
 * @param original 当前库存
 */
const computedResult = (realityCount: number | string, original: number | string) => {
    // 盘盈
    if (realityCount > original) {
        return 2
    } else if (realityCount < original) {
        // 盘亏
        return 3
    } else {
        // 平衡
        return 1
    }
}
/** 盘点完成 */
const inventoryCompleted = () => {
    dialogShow.value = true
}
/** 二次确认弹窗取消 */
const cancel = () => {
    dialogShow.value = false
}
/** 二次确认弹窗确定 */
const warehousingClick = async () => {
    const res = await checkShelfStatus({ id: countId.value })
    // 有下架商品
    if (res.data) {
        showConfirmDialog({
            message:
                '本次盘点存在已下架商品，请注意~',
        })
            .then(async () => {
                await doCountFinish({ id: countId.value })
                showSuccessToast('盘点成功')
                setTimeout(() => {
                    removeLocalStorage()
                    router.push({
                        path: '/inventorySuccessful',
                        query: {
                            from: details.value ? '/inventoryRecord' : '/inventoryCommodity'
                        }
                    })
                }, 500)
            })
            .catch(() => {
                // on cancel
            });
    } else {
        await doCountFinish({ id: countId.value })
        showSuccessToast('盘点成功')
        setTimeout(() => {
            removeLocalStorage()
            router.push({
                path: '/inventorySuccessful',
                query: {
                    from: details.value ? '/inventoryRecord' : '/inventoryCommodity'
                }
            })
        }, 500)
    }

}
/** 数据流转 */
const commodityCirculation = (item) => {
    router.push({
        path: '/commodityCirculation',
        query: {
            datas: JSON.stringify(item)
        }
    })
}
onMounted(async () => {
    // 继续盘点
    if (details.value) {
        overlayShow.value = true
        const res = await queryCountDetailList({ countId: JSON.parse(details.value as any).id });

        if (res.rows.length > 0) {
            shelvesCode.value = [...new Set(res.rows.map(item => item.locationName))]

            // 处理数据格式
            const warehouseLists = res.rows.map((item: any) => {
                return {
                    productImage: item.productInfo.productImage ? getEnvValue("VITE_APP_PIC_URL") + item.productInfo.productImage.split(',')[0] : item.productInfo.productImage,
                    mechanismList: item.productInfo.mechanismList,
                    styleName: item.productInfo.styleName,
                    shelvesStatus: item.productInfo.shelvesStatus,
                    sellingPoints: item.productInfo.sellingPoints,
                    coreName: item.productInfo.coreName,
                    locationName: item.locationName,
                    countNum: item.countNum,
                    countResult: item.countResult,
                    id: item.productInfo.id,
                    remark: item.remark,
                    stockInfo: {
                        locationName: item.locationName,
                        stockAvailable: item.productInfo.stockInfo.stockAvailable,
                        stockTotal: item.productInfo.stockInfo.stockTotal,
                    }
                }
            })
            countId.value = res.rows[0].countId
            shelvesCode.value.forEach((item, index) => {
                warehouseLists.forEach(element => {
                    if (!warehouseList.value[index]) {
                        warehouseList.value[index] = [];
                    }
                    if (element.locationName == item) {
                        warehouseList.value[index].push(element)
                    }
                });
            })
        } else { // 当盘点扫码时 下架或者调拨操作和盘点并发 导致冲突致使商品为空 盘点记录为空
            countId.value = JSON.parse(details.value as any).id
            showComplete.value = true
        }
        overlayShow.value = false
    } else {
        // (window as any).uni.webView.postMessage({
        //     data: {
        //         type: "scanCode",
        //         name: "inventoryCommodity",
        //         // 第一次进入调取生成库存单接口 标识
        //         indexs: 1
        //     },
        // })
        // 第一次进入调取生成库存单接口
        // const res = await generateCountCode()
        // if (res.code == 1001) {
        //     showFailToast({ message: res.msg });
        //     setTimeout(() => {
        //         router.push('/inventoryAllocation')
        //     }, 500)
        //     return
        // } else {
        //     countId.value = res.data
        // }
        // const indexs = shelvesCode.value.indexOf('L1-1-1')
        // // 已有的货架码不可再加
        // if (indexs != -1) {
        //     showFailToast('该库位码已存在盘点中')
        // } else {
        //     if (typeof 'L1-1-1' === 'string') {
        //         try {
        //             await stockLocation({ name: 'L1-1-1' })
        //             overlayShow.value = true
        //             shelvesCode.value.unshift('L1-1-1')
        //             const res = await queryProductByLocation({ locationName: 'L1-1-1', countId: countId.value })
        //             res.data.forEach(element => {
        //                 element.productImage = getEnvValue("VITE_APP_PIC_URL") + element.productImage.split(',')[0]
        //             });
        //             warehouseList.value.unshift(res.data)
        //             overlayShow.value = false
        //         } catch (error) {
        //             overlayShow.value = false
        //         }
        //     } else {
        //         showFailToast({ message: '货架码错误' });
        //     }
        // }
    }

})
</script>
<style lang="less" scoped>
.inventoryCommodity {
    height: calc(100vh - 44px);
    width: 100%;
    background: #F6FAFF;
    box-sizing: border-box;
    overflow: hidden;

    .flexd {
        display: flex;
        align-items: center;

        .addArehousing_item {
            width: 151px;
            height: 42px;
            background: #FFFFFF;
            border-radius: 21px;
            font-weight: 400;
            font-size: 16px;
            color: #0094FF;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: auto;
            margin-top: 15px;

            .imgs {
                width: 25%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: right;
            }

            .title {
                width: 70%;
                display: flex;
                align-items: center;
                padding-left: 10px;
                box-sizing: border-box;
            }

            .van-image {
                width: 16px;
                height: 16px;
            }
        }

        .addArehousing_code {
            margin-top: 15px !important;
        }
    }

    .scoll_div {
        width: 100%;
        height: calc(100% - 96px);
        overflow: auto;
        box-sizing: border-box;
        padding-bottom: 60px;

        .scoll_div_button {
            width: 345px;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            text-align: center;
            line-height: 44px;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            position: fixed;
            bottom: 8px;
            left: 15px;
        }
    }

    .menu_cion {
        width: 19px;
        height: 18px;
    }

    .titles {
        font-weight: 400;
        font-size: 12px;
        color: #B8BECA;
        margin: 15px 15px 5px 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
            font-size: 14px;
            color: #009DFF;
            display: flex;
            align-items: center;

            .buttons {
                width: 50px;
                height: 20px;
                background: #fff;
                border-radius: 2px;
                font-weight: 400;
                font-size: 12px;
                color: #FC2540;
                text-align: center;
                line-height: 20px;
                border: 1px solid #FC2540;
                margin-left: 10px;
            }
        }
    }

    :deep(.van-overlay) {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    :deep(.van-dialog__content) {
        box-sizing: border-box;
        padding: 20px;
    }

    .dialog_title {
        text-align: center;
        margin: 20px;
    }

    .conputed_bottom {
        width: 375px;
        height: 60px;
        background: #FFFFFF;
        box-shadow: 0px -3px 4px 0px rgba(212, 217, 223, 0.3);
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 15px;
        position: fixed;
        bottom: 0;

        .conputed_bottom_left {
            display: flex;
            align-items: center;

            .van-image {
                width: 40px;
                height: 40px;
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
                margin-right: 10px;

            }

            .span {
                font-weight: 500;
                font-size: 21px;
                color: #0094FF;
            }
        }

        .button {
            width: 120px;
            height: 40px;
            background: #0094FF;
            border-radius: 23px;
            text-align: center;
            line-height: 40px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
        }
    }

    .dialog_buttons {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .cancel {
            width: 135px;
            height: 44px;
            border-radius: 23px;
            border: 1px solid #1A1B1C;
            text-align: center;
            line-height: 44px;
        }

        .save {
            width: 135px;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            text-align: center;
            line-height: 44px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
        }
    }

    .conent {}

    .div_content {}

    .liveStreamingMechanisms {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 20px;
        background: #0094FF;
        border-radius: 2px 0px 2px 0px;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        text-align: center;
        line-height: 20px;
    }

    .conent_pre {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
        background-color: #fff;
        margin-top: 10px;

        .conent_pre_header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .conent_pre_img {
                width: 90px;
                height: 90px;

                .van-image {
                    width: 90px;
                    height: 90px;

                    :deep(.van-image__img) {
                        border-radius: 5px !important;
                    }
                }
            }

            .conent_pre_des {
                width: calc(100% - 90px);
                height: 90px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                padding-left: 10px;
                align-content: space-around;

                .contnt_title {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .contnt_styleName {
                        font-weight: 400;
                        font-size: 14px;
                        color: #1A1B1C;
                        width: 150px;
                        height: 20px;
                        white-space: nowrap;
                        /* 确保文本在一行内显示 */
                        overflow: hidden;
                        /* 隐藏溢出的内容 */
                        text-overflow: ellipsis;
                    }

                    .contnt_status {
                        width: 67px;
                        height: 26px;
                        background: #EBF4FF;
                        border-radius: 2px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #0094FF;
                        text-align: center;
                        line-height: 26px;
                    }

                    .contnt_status1 {
                        width: 67px;
                        height: 26px;
                        background: #EBF4FF;
                        border-radius: 2px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #0094FF;
                        text-align: center;
                        line-height: 26px;
                    }

                    .contnt_status2 {
                        width: 67px;
                        height: 26px;
                        background: #E7FDEE;
                        border-radius: 2px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #19D11B;
                        text-align: center;
                        line-height: 26px;
                    }

                    .contnt_status3 {
                        width: 67px;
                        height: 26px;
                        background: #FDE7E7;
                        border-radius: 2px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #FC2540;
                        text-align: center;
                        line-height: 26px;
                    }

                    .contnt_status4 {
                        width: 67px;
                        height: 26px;
                        background: #EBF4FF;
                        border-radius: 2px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #0094FF;
                        text-align: center;
                        line-height: 26px;
                    }

                }

                .contnt_mechanism {
                    width: 100%;
                    font-weight: 400;
                    font-size: 12px;
                    color: #B8BECA;
                    white-space: nowrap;
                    /* 确保文本在一行内显示 */
                    overflow: hidden;
                    /* 隐藏溢出的内容 */
                    text-overflow: ellipsis;
                }

                .contnt_bottom {
                    width: 100%;
                    height: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .price {
                        font-weight: 500;
                        font-size: 14px;
                        color: #FC2540;
                    }

                    .commission {
                        font-weight: 500;
                        font-size: 14px;
                        color: #FC2540;
                    }

                    .coreName {
                        font-weight: 400;
                        font-size: 12px;
                        color: #0094FF;
                    }
                }
            }
        }

        .conent_pre_bottom {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .right {
                .correct {
                    margin-left: 20px;
                }
            }

            .left {
                width: 120px;
                display: flex;
                align-items: center;
                color: #19D11B;

                .left_div {
                    position: relative;
                    width: 28px;
                    height: 28px;
                    margin-right: 10px;

                    .van-image {
                        position: absolute;
                        left: 0;
                        top: 0;
                    }

                    span {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        font-weight: 400;
                        font-size: 12px;
                        color: #19D11B;
                    }
                }
            }
        }

        .product_detail_title-content-info {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .product_detail_title-content-info-name {
                font-weight: 400;
                font-size: 14px;
                color: #1a1b1c;
                line-height: 14px;
                width: 100px;
            }

            .colors {
                color: #19D11B !important;
            }

            .product_detail_title-content-info-content {
                flex: 1;
                min-width: 0;
                font-weight: 400;
                font-size: 14px;
                color: #b8beca;
                line-height: 14px;
                margin-left: auto;
                display: flex;
                justify-content: flex-end;
                word-break: break-all;

                .priColor {
                    color: #0094FF;
                }
            }

            .contents {
                width: 200px;
                font-weight: 400;
                font-size: 14px;
            }

        }

        .divs {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .buttons {
            width: 67px;
            height: 26px;
            background: #fff;
            border-radius: 2px;
            font-weight: 400;
            font-size: 14px;
            color: #FC2540;
            text-align: center;
            line-height: 26px;
            border: 1px solid #FC2540;
        }
    }

    .pop_content {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;

        .conent_pre_header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .conent_pre_img {
                width: 90px;
                height: 90px;

                .van-image {
                    width: 90px;
                    height: 90px;

                    :deep(.van-image__img) {
                        border-radius: 5px !important;
                    }
                }
            }

            .conent_pre_des {
                width: calc(100% - 90px);
                height: 90px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                padding-left: 10px;
                align-content: space-around;

                .contnt_title {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .contnt_styleName {
                        font-weight: 400;
                        font-size: 18px;
                        color: #1A1B1C;
                        width: 100%;
                        height: 25px;
                        white-space: nowrap;
                        /* 确保文本在一行内显示 */
                        overflow: hidden;
                        /* 隐藏溢出的内容 */
                        text-overflow: ellipsis;
                    }

                    .contnt_status {
                        width: 67px;
                        height: 26px;
                        background: #EBF4FF;
                        border-radius: 2px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #0094FF;
                        text-align: center;
                        line-height: 26px;
                    }

                    .contnt_status1 {
                        width: 67px;
                        height: 26px;
                        background: #EBF4FF;
                        border-radius: 2px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #0094FF;
                        text-align: center;
                        line-height: 26px;
                    }

                    .contnt_status2 {
                        width: 67px;
                        height: 26px;
                        background: #E7FDEE;
                        border-radius: 2px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #19D11B;
                        text-align: center;
                        line-height: 26px;
                    }

                    .contnt_status3 {
                        width: 67px;
                        height: 26px;
                        background: #FDE7E7;
                        border-radius: 2px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #FC2540;
                        text-align: center;
                        line-height: 26px;
                    }

                    .contnt_status4 {
                        width: 67px;
                        height: 26px;
                        background: #EBF4FF;
                        border-radius: 2px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #0094FF;
                        text-align: center;
                        line-height: 26px;
                    }

                }

                .contnt_mechanism {
                    width: 100%;
                    font-weight: 400;
                    font-size: 14px;
                    color: #19D11B;
                }

                .contnt_bottom {
                    width: 100%;
                    height: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-weight: 400;
                    font-size: 12px;
                    color: #B8BECA;

                    .price {
                        font-weight: 500;
                        font-size: 14px;
                        color: #FC2540;
                    }

                    .commission {
                        font-weight: 500;
                        font-size: 14px;
                        color: #FC2540;
                    }

                    .coreName {
                        font-weight: 400;
                        font-size: 12px;
                        color: #0094FF;
                    }
                }
            }
        }

        .product_detail_title-content-info {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .product_detail_title-content-info-name {
                font-weight: 400;
                font-size: 14px;
                color: #1a1b1c;
                line-height: 14px;
                width: 100px;
            }

            .colors {
                color: #19D11B !important;
            }

            .product_detail_title-content-info-content {
                flex: 1;
                min-width: 0;
                font-weight: 400;
                font-size: 14px;
                color: #b8beca;
                line-height: 14px;
                margin-left: auto;
                display: flex;
                justify-content: flex-end;
                word-break: break-all;

                .left {
                    display: flex;
                    align-items: center;
                    color: #b8beca;

                    .left_div {
                        position: relative;
                        width: 28px;
                        height: 28px;
                        margin-right: 10px;

                        .van-image {
                            position: absolute;
                            left: 0;
                            top: 0;
                        }

                        span {
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -50%);
                            font-weight: 400;
                            font-size: 12px;
                            color: #19D11B;
                        }
                    }
                }


                .priColor {
                    color: #0094FF;
                }
            }

            .contents {
                width: 200px;
                font-weight: 400;
                font-size: 14px;
            }


        }

        .buttons_div {
            width: 345px;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            text-align: center;
            line-height: 44px;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            margin-top: 10px;
        }
    }

    :deep(.van-field) {
        padding: 0 !important;
        margin-top: 10px;
        background: #F6FAFF;
    }

    :deep(.van-field__value) {
        padding: 10px;
    }
}
</style>